<template>
  <div class="projectListContainer">
    <div class="projectList" v-if="projectList.length != 0">
      <ProjectItem
        v-for="(item, i) in projectList"
        :key="item"
        :projectItem="item"
        @click="$emit('projectItemClick', item)"
        :getCollectedList="props.getCollectedList"
				:type='props.type'
      >
        <template #titleRight>
          <template v-if="item.jobName && !isTeacher()">
            <a-tooltip color="rgba(87,87,87,0.8)">
              <template #title>{{ item.jobName }}</template>
              <span class="jobName">{{ item.jobName }}</span>
            </a-tooltip>
          </template>
          <!-- <span v-if='item.jobName'>{{item.jobName}}</span> -->
          <span
            v-if="!item.jobName"
            :style="{ color: item.recruitStatus == 0 ? 'deeppink' : 'black' }"
          >
            {{ item.recruitStatus == 0 ? '未招满' : '已招满' }}
          </span>
        </template>
      </ProjectItem>
    </div>
    <div class="paginationBox" v-if="projectList.length != 0">
      <a-pagination
        v-model:current="pageData.page"
        v-model:pageSize="pageData.size"
        :hideOnSinglePage="false"
        show-size-changer
        :total="pageData.total"
        @change="(page, pageSize) => $emit('paginationChange', page, pageSize)"
      />
    </div>
    <div class="projectList flexCenter" v-if="projectList.length == 0">
      <a-empty>
        <template #description>
          <span> 项目为空，请到项目广场选择 </span>
        </template>
        <a-button type="primary" @click="toProjectSquare">去选择</a-button>
      </a-empty>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, watch, reactive } from 'vue'
import ProjectItem from '@/components/ProjectItem.vue'
import { useRouter, useRoute } from 'vue-router'
import { isTeacher } from "@/stores/info"
const props = defineProps({
  projectList: Array,
  pageData: Object,
  getCollectedList: Function,
	type:String
})

const emit = defineEmits(['projectItemClick', 'paginationChange'])
let { projectList, pageData } = props

const router = useRouter()
let toProjectSquare = () => {
  router.push({
    name: 'ProjectSquare',
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/public.scss';

.projectListContainer {
  height: 100%;
  width: 100%;
  // display: flex;
  // flex-direction: column;
  overflow-y: auto;
  @include hoverShowScrollBar();

  // .projectList {
  //   max-width: 100%;
  //   display: flex; /* 启用 Flex 布局 */
  //   flex-wrap: wrap; /* 允许换行 */
  //   gap: 20px; /* 设置子元素之间的间距 */
  //   justify-content: flex-start; /* 设置主轴对齐 */

  // 	&>div{
  // 		min-width: 200px; /* 设置项目的最小宽度 */
  // 		flex: 1 1 auto; /* 允许缩放 */
  // 	}
  // }

  // .projectList {
  //   display: -ms-grid; /* 旧版 IE */
  //   display: grid;
  //   /* 其他样式 */
  // }
  .projectList {
    max-width: 100%;
    align-self: center;
    display: -ms-grid;
    display: grid;
    /* 启用 Grid 布局 */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* 自动填充列，最小宽度200px */
    gap: 20px;
    /* 设置子元素之间的间距 */
    align-items: start;
    /* 垂直对齐 */

    .jobname: {
      width: 70px;
      display: inline-block;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .paginationBox {
    width: 100%;
    padding: 10px 0;
    margin-top: auto;
    position: absolute;
    bottom: 0;
    @include FlexCenterAndCenter();
  }

  .flexCenter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-bottom: 100px;
  }
}
</style>
